<template>
	<view style="display: flex;flex-direction: column;">
		
		<view class="item" style="padding: 10rpx 30rpx 0;margin-top: 20rpx;" id="autoInfo" v-if="showAutoInfo">
			<u-form :model="addmodel" ref="uform" label-width="auto">
			
				<view style="height: 50rpx;display: flex;align-items: center;margin-bottom: 10rpx;" @click="addmodel.contractType=2">
					
					<u-icon v-if="3==selCountType" :color="2==addmodel.contractType?'#1573FF':'#333'" :name="2==addmodel.contractType?'checkmark-circle-fill':'checkmark-circle'" size="18"></u-icon>
					
					<text style="margin-left: 20rpx;font-size: 30rpx;font-weight: bold;color: #333;">根据订单信息自动生成合同</text>
					
				</view>
				
				<view v-show="addmodel.contractType===2">
				
					<u-form-item v-if="viewStateBean.templateName[0]" :required="viewStateBean.templateName[2]" label="选择合同模板" @click="viewStateBean.templateName[1] && selTemplate()">
						<u-input v-model="addmodel.templateName" inputAlign="right" placeholder="请选择" :disabled="true"
							disabledColor="#ffffff" border="none"></u-input>
							
						<view slot="right">
							<u-icon v-if="viewStateBean.templateName[1]" name="arrow-right"></u-icon>
						</view>
					</u-form-item>
				</view>
			</u-form>
		</view>
		
		
		<view class="item" style="padding: 10rpx 30rpx 0;margin-top: 20rpx;" id="manualInfo" v-if="showManualInfo">
			<u-form :model="addmodel" ref="uform" label-width="auto">
			
				<view style="height: 50rpx;display: flex;align-items: center;margin-bottom: 10rpx;" @click="addmodel.contractType=1">
					
					<u-icon v-if="3==selCountType" :color="1==addmodel.contractType?'#1573FF':'#333'" :name="1==addmodel.contractType?'checkmark-circle-fill':'checkmark-circle'" size="18"></u-icon>
					
					<text style="margin-left: 20rpx;font-size: 30rpx;font-weight: bold;color: #333;">直接选择/填写合同信息</text>
					
				</view>
				
				<view v-show="addmodel.contractType===1">
			
					<u-form-item v-if="viewStateBean.code[0]" :required="viewStateBean.code[2]" label="合同编号" borderBottom>
						
						<view style="display: flex;align-items: center;">
							
							<u-input v-model="addmodel.code" inputAlign="right" :disabled="!viewStateBean.code[1]" disabledColor="#ffffff"
							 border="none" placeholder="请输入合同编号">
							</u-input>
							
							<text style="font-size: 30rpx;color: #1573FF;margin: 0 0 0 10rpx;" @click="viewStateBean.code[1] && selContract()">选择合同</text>
							
							<view slot="right">
								<u-icon v-if="viewStateBean.code[1]" name="arrow-right"></u-icon>
							</view>
						</view>
						
					</u-form-item>
					
					<u-form-item v-if="viewStateBean.timeStart[0]" :required="viewStateBean.timeStart[2]" label="合同生效日期" borderBottom @click="viewStateBean.timeStart[1] && pickerShow(1)">
						<u-input v-model="addmodel.timeStart" inputAlign="right" placeholder="请选择合同生效日期" :disabled="true"
							disabledColor="#ffffff" border="none"></u-input>
							
						<view slot="right">
							<u-icon v-if="viewStateBean.timeStart[1]" name="arrow-right"></u-icon>
						</view>
					</u-form-item>
					
					<u-form-item v-if="viewStateBean.timeFinish[0]" :required="viewStateBean.timeFinish[2]" label="合同终止日期" borderBottom @click="viewStateBean.timeFinish[1] && pickerShow(2)">
						<u-input v-model="addmodel.timeFinish" inputAlign="right" placeholder="请选择合同终止日期" :disabled="true"
							disabledColor="#ffffff" border="none"></u-input>
							
						<view slot="right">
							<u-icon v-if="viewStateBean.timeFinish[1]" name="arrow-right"></u-icon>
						</view>
					</u-form-item>
				
					<u-form-item v-if="viewStateBean.desc[0]" :required="viewStateBean.desc[2]" label="合同备注" borderBottom>
						<u-input v-model="addmodel.desc" inputAlign="right" :disabled="!viewStateBean.desc[1]" disabledColor="#ffffff"
						 border="none" placeholder="请输入备注">
						</u-input>
					</u-form-item>
					
					<view v-if="viewStateBean.contractFile[0]" style="display: flex;flex-direction: column;">
						<u-form-item label="合同附件" :required="viewStateBean.contractFile[2]">
							<!-- <view class="car-photo" style="padding: 20rpx 0; display: block;font-size: 30rpx;color: #333;">订单附件</view> -->
						</u-form-item>
						
						<lr-upload :disabled="!viewStateBean.contractFile[1]" objType="4" ref="upload1" tag="1" @on-change="uploadOnChange"></lr-upload>
					</view>
				
				</view>
			
			</u-form>
		</view>
		
		
		<view style="height: 100rpx;"></view>
		
		<view class="button-container">
			<button class="btn-item" @click="btnClick">保存</button>
		</view>
		
		<!-- 开始时间 -->
		<u-datetime-picker
			:show="startShow"
			v-model="value1" :maxDate="value2"
			mode="date" @confirm="timeConfirm"
			@cancel="startShow=false"></u-datetime-picker>
			
		<!-- 结束时间 -->
		<u-datetime-picker
			:show="endShow"
			v-model="value2" :minDate="value1"
			mode="date" @confirm="timeConfirm"
			@cancel="endShow=false"></u-datetime-picker>
		
	</view>
</template>

<script>
	import lrUpload from '@/components/global/lr-upload.vue'
  import {isVideo} from "@/common/calc";
	export default {
		components: {
			lrUpload,
		},
		data() {
			return {
				value1:Number(new Date()),
				value2:Number(new Date())+12*30*24*3600*1000,
				showAutoInfo:true,
				showManualInfo:true,
				startShow:false,
				endShow:false,
				type:'',
				orderCarId:'',
				orderCode:'',
				noWorkFlow:false,
				addContract:false,
				pickerType:'',
				selCountType:3,//0啥也没有 1自动  2手动  3手动+自动
				addmodel:{
					contractType:0
				},
				initialData:{},
				viewStateBean:{
					code:[true, true, true],
					timeStart:[true, true, true],
					timeFinish:[true, true, false],
					desc:[true, true, false],
					contractFile:[true, true, false],
					templateName:[true, true, true],
				}
			}
		},
		methods: {
			//图片上传成功回调
			uploadOnChange(tag, resultList, resultObjList) {
				console.log(tag, resultList, resultObjList);
				switch (tag) {
					case '1': //订单附件
						console.log('resultList===>', resultObjList)
						this.addmodel.fileLst = resultObjList;
						
						break
				}
			},
			
			//picker是否显示
			pickerShow(type) {
				switch (type) {
					case 1:
						this.startShow = true;
						break
					case 2:
						this.endShow = true;
						break
				}
				this.pickerType = type;
			},
			
			timeConfirm(e){
				let timeStr = uni.$u.timeFormat(e.value, 'yyyy-mm-dd');
				
				switch (this.pickerType) {
					case 1: //租期开始时间
						this.startShow = false;
						this.addmodel.timeStart = timeStr;
						break
					case 2: //租期结束时间
						this.endShow = false;
						this.addmodel.timeFinish = timeStr;
						break
				}
			},
			
			selTemplate(){
				uni.navigateTo({
					url:'/pagesB/contract/contract-template?from=2&type='+this.type
				})
			},
			
			selContract(){
				uni.navigateTo({
					url:'/pagesB/contract/contract-sel?rentType='+this.type
				})
			},
			
			btnClick(){
				if(3==this.selCountType && 1!=this.addmodel.contractType && 2!=this.addmodel.contractType){
					this.$u.toast('请选择合同生成方式')
					return
				}
				
				if(2==this.addmodel.contractType){
					if(this.viewStateBean.templateName[2] && uni.$u.test.isEmpty(this.addmodel.templateName)){
						this.$u.toast('合同模板不能为空')
						return
					}
					
					this.addmodel.id = ''
					this.addmodel.code = ''
					this.addmodel.rentType = ''
					this.addmodel.timeStart = ''
					this.addmodel.timeFinish = ''
					this.addmodel.desc = ''
					this.addmodel.fileLst = ''
					
				}else if(1==this.addmodel.contractType){
					if(this.viewStateBean.code[2] && uni.$u.test.isEmpty(this.addmodel.code)){
						this.$u.toast('合同编号不能为空')
						return
					}
					
					if(this.viewStateBean.timeStart[2] && uni.$u.test.isEmpty(this.addmodel.timeStart)){
						this.$u.toast('请选择合同生效时间')
						return
					}
					
					if(this.viewStateBean.timeFinish[2] && uni.$u.test.isEmpty(this.addmodel.timeFinish)){
						this.$u.toast('请选择合同终止时间')
						return
					}
					
					if(this.viewStateBean.desc[2] && uni.$u.test.isEmpty(this.addmodel.desc)){
						this.$u.toast('请输入合同备注')
						return
					}
					
					if(this.viewStateBean.contractFile[2] && uni.$u.test.isEmpty(this.addmodel.fileLst)){
						this.$u.toast('请输入合同备注')
						return
					}
					
					this.addmodel.templateName = ''
					this.addmodel.templateId = ''
				}
				
				
				let that = this
				
				if(that.addContract){
					//是新增
					uni.showLoading({
						title:'加载中'
					})
					this.$u.api.appSaveContract({
						contractType:that.addmodel.contractType,
						templateId:that.addmodel.templateId,
						contractCode:that.addmodel.code,
						contractTimeStart:that.addmodel.timeStart,
						contractTimeFinish:that.addmodel.timeFinish,
						contractDesc:that.addmodel.desc,
						orderCarId:that.orderCarId,
						orderCarCode:that.orderCode,
						pictureList:that.addmodel.fileLst,
					}).then(res=>{
						uni.hideLoading()
						
						uni.$emit('add-contract-success', res)
						
						that.$u.toast('提交成功')
						setTimeout(()=>{
							uni.navigateBack()
						}, 1000)
					}).catch(e=>{
						uni.hideLoading()
					})
					
				}else{
					uni.$emit('addcontract-bean', that.addmodel)
					uni.navigateBack()
				}
				
				
			},
			
		},
		onLoad(op) {
			let that = this
			
			this.type = 'null'!=op.type?op.type:''
			this.orderCarId = 'null'!=op.orderCarId?op.orderCarId:''
			this.orderCode = 'null'!=op.orderCode?op.orderCode:''
			this.noWorkFlow = 'null'!=op.noWorkFlow?op.noWorkFlow:false
			this.addContract = 'null'!=op.addContract?op.addContract:false
			
			if(!uni.$u.test.isEmpty(getApp().globalData.addOrderContract)){
				this.addmodel = getApp().globalData.addOrderContract
				
				
				if(!uni.$u.test.isEmpty(that.addmodel.fileLst)){
					
					this.$refs.upload1.fileList1=that.addmodel.fileLst.filter(item => {
            return 1== item.type_file||1==item.typeFile
          }).map(item=>{
							return {
                ...item,
								message: "",
								size: 52363,
								status: "success",
								thumb: that.baseImgUrl()+item.url,
								type: isVideo(item.url),
								url: item.url
							}
					})
				}else{
					this.$refs.upload1.fileList1=[]
				}
				
				
				getApp().globalData.addOrderContract = {}
			}
			
			if(!uni.$u.test.isEmpty(getApp().globalData.initialData)){
				that.initialData = getApp().globalData.initialData
				
				getApp().globalData.initialData = {}
				
				//处理动态数据
				if(!uni.$u.test.isEmpty(that.initialData.list)){
					for (let module of that.initialData.list) {
						switch(module.moduleInfo){
							case 'contractBusiness':
								//合同
								for(let field of module.fields){
									that.viewStateBean[field.fieldInfo]=[!field.hide, field.edit, field.required]
								}
								break
						}
					}
				}
				
				this.$forceUpdate()
				
				const query = uni.createSelectorQuery().in(this);
				
				setTimeout(()=>{
					query.select('#autoInfo').boundingClientRect(data => {
						console.log("autoInfo得到布局位置信息" + JSON.stringify(data));


						// that.showAutoInfo = data.height>43
						that.showAutoInfo = viewStateBean.templateName[0]
					}).exec();
					
					query.select('#manualInfo').boundingClientRect(data => {
						console.log("manualInfo得到布局位置信息" + JSON.stringify(data));

            // code:[true, true, true],
            //     timeStart:[true, true, true],
            //     timeFinish:[true, true, false],
            //     desc:[true, true, false],
            //     contractFile:[true, true, false],
						// that.showManualInfo = data.height>43
						that.showManualInfo = viewStateBean.code[0] || viewStateBean.timeStart[0]
                || viewStateBean.timeFinish[0] || viewStateBean.desc[0] || viewStateBean.contractFile[0]
					}).exec();
					
					
					//0啥也没有 1自动  2手动  3手动+自动
					if (that.showAutoInfo) {
						if (that.showManualInfo) {
							that.selCountType = 3;
						} else {
							that.selCountType = 1;
							that.addmodel.contractType = 2
						}
					} else {
						if (that.showManualInfo) {
							that.selCountType = 2;
							that.addmodel.contractType = 1
						} else {
							that.selCountType = 0;
						}
					}
					
					if(that.noWorkFlow){
						that.selCountType = 3;
					}
					
				}, 1500)
				
			}
			
			
			
			uni.$on('seltemplate', res=>{
				console.log('收到了合同模板', res);
				
				//自动生成合同
				if(2==res.from){
					that.addmodel.templateName = res.nameTpl
					that.addmodel.templateId = res.id
					that.addmodel.contractType = 2
				}
				
				console.log('合同模板变化后=>', that.addmodel);
				that.$forceUpdate()
			})
			
			uni.$on('selcontract', res=>{
				console.log('收到合同类型');
				
				that.addmodel.contractType = 1
				
				if(!uni.$u.test.isEmpty(res)){
					that.addmodel.id = res.id
					that.addmodel.code = res.code
					that.addmodel.rentType = that.type
					that.addmodel.timeStart = res.timeStart
					that.addmodel.timeFinish = res.timeFinish
					that.addmodel.desc = res.remark
					that.addmodel.fileLst = res.fileLst
					
					if(!uni.$u.test.isEmpty(that.addmodel.fileLst)){
						
						this.$refs.upload1.fileList1=that.addmodel.fileLst.filter(item => {
              return 1== item.type_file||1==item.typeFile
            }).map(item=>{
								return {
                  ...item,
									message: "",
									size: 52363,
									status: "success",
									thumb: that.baseImgUrl()+item.url,
									type: isVideo(item.url),
									url: item.url
								}
						})
					}else{
						this.$refs.upload1.fileList1=[]
					}
					
				}
				
				that.$forceUpdate()
			})
			
		},
		onUnload() {
			uni.$off('seltemplate')
			uni.$off('selcontract')
		}
	}
</script>

<style>

</style>
